<template>
    <div class="home">
      <div class="title">
        <div class="space"></div>
        <div class="sn-name">
          <div class="sn">{{ sn }}</div>
          <div class="name">{{ deviceName }}</div>
        </div>
        <div class="status1" v-if="deviceStatus && deviceStatus == 1">
          <span></span>在线
        </div>
        <div class="status2" v-else-if="deviceStatus && deviceStatus == 0">
          <span></span>离线
        </div>
        <div class="status2" v-else>
          <span style="background-color: #000"></span>
        </div>
      </div>
      <!-- <div class="video-box" :style="{ height: videoHeigth + 'vw' }"> -->
      <div class="video-box">
        <div
          class="video"
          :style="{ height: videoHeigth + 'vw', width: 100 + '%' }"
        >
          <div
            @click="clickVideo"
            id="265Player"
            v-if="codec === 1 || codec === 2"
          ></div>
          <div v-if="codec === 4" style="width: 100%; height: 100%">
            <canvas id="canvas" />
          </div>
          <!-- <div style="width: 100vw; height: 10vw; background: red"></div> -->
  
          <div class="big-play-button" v-if="!isPlay">
            <span class="iconfont icon-bofang" @click="startPlay"></span>
          </div>
  
          <!-- 加载效果 -->
          <!-- <div class="loading" v-show="isLoading">
            <span class="iconfont icon-jiazaizhong"></span>
          </div> -->
        </div>
      </div>
      <!-- 视频内控制栏 -->
      <div class="controls-box" v-if="isControls">
        <div>
          <span
            class="iconfont icon-zanting"
            v-if="!isPause"
            @click="PuaseVideo"
          ></span>
          <span
            class="iconfont icon-yinpinbofang"
            v-else
            @click="PlayVideo"
          ></span>
        </div>
        <div class="clarity">
          <div class="select" v-if="isLight">
            <div
              @click="cloudControl('light_on')"
              :style="{ color: lightStatus === 1001 ? 'skyblue' : '#fff' }"
            >
              开灯
            </div>
            <div
              @click="cloudControl('light_off')"
              :style="{ color: lightStatus === 1002 ? 'skyblue' : '#fff' }"
            >
              关灯
            </div>
            <div
              @click="cloudControl('light_auto')"
              :style="{ color: lightStatus === 1003 ? 'skyblue' : '#fff' }"
            >
              自动
            </div>
          </div>
          <div class="light" @click="clickLight">
            <span
              v-if="lightStatus === 1001"
              class="iconfont dengguang1"
            ></span>
            <span
              v-else-if="lightStatus === 1002"
              class="iconfont guanbidengguang1"
              style="color: #fff"
            ></span>
            <span
              v-else-if="lightStatus === 1003"
              class="iconfont icon-zhaoming"
            ></span>
          </div>
        </div>
        <div>
          <span
            class="iconfont icon-xuanzhuan"
            @click="cloudControl('reverse')"
          ></span>
        </div>
        <div class="clarity">
          <!-- <div class="select" v-if="isClarity">
              <div
                @click="highDefinition"
                :style="{ color: clarity === 1 ? 'skyblue' : '#fff' }"
              >
                高清
              </div>
              <div
                @click="StandardDefinition"
                :style="{ color: clarity === 0 ? 'skyblue' : '#fff' }"
              >
                标清
              </div>
            </div> -->
          <div class="select-result" @click="clickCearity">
            <span v-if="clarity === 0">标清</span>
            <span v-else>高清</span>
          </div>
        </div>
      </div>
      <!-- 翻转指令 -->
      <div class="direction">
        <div class="circle">
          <div class="top">
            <span
              class="iconfont icon-shang"
              @click="cloudControl('spin_top')"
            ></span>
          </div>
          <div class="right">
            <span
              class="iconfont icon-you"
              @click="cloudControl('spin_right')"
            ></span>
          </div>
          <div class="left">
            <span
              class="iconfont icon-zuo"
              @click="cloudControl('spin_left')"
            ></span>
          </div>
          <div class="bottom">
            <span
              class="iconfont icon-xia"
              @click="cloudControl('spin_bottom')"
            ></span>
          </div>
          <div class="middle"></div>
        </div>
      </div>
      <!-- <input type="file" /> -->
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isControls: false, //是否显示控件
        isPlay: true, //是否显示开始播放按钮
        isClarity: false, //是否弹出清晰度
        clarity: 1, //清晰度  0：标清  1：高清
        isLight: false, //是否弹出开灯关灯自动
        lightStatus: 0, // 灯光状态  1001开启/ 1002关闭/ 1003自动
        isPause: true,
        isLoading: true,
        player: null, //t.init
        url: "", //wu
        server_ip: "",
        timer: "",
        codec: 1, //h264
        play_token: "",
        token: "",
        t: "",
        widthRate: "",
        videoHeigth: 75,
        sn: "",
        deviceName: "",
        deviceStatus: "",
  
        isSupportReverseCtr: false, // 是否显示翻转控制
        isSupportPtzCtr: false, // 是否显示运动翻转
        isSupportLightCtr: false, // 是否显示灯光控制
      };
    },
    mounted() {
      let { search } = window.location;
      search = decodeURI(search);
      // this.sn = search.substr(5, 8); //
      this.sn = search.substr(4, 8); //变量--mini
      console.log(this.sn,'sn');
      var t = new Api();
      this.t = t;
      // 登录
      // t.login("18194005618", "Yl86503860@")
      // t.login("787814981@qq.com", "qwe123")
      // t.login("19877811912", "Yuanliu123")
      // t.login("yuanliu", "yL202110")
      t.login("yuanliu@hongshi.com", "yuanliuhongshi")
        .then((res) => {
          if (res.result == 0) {
            this.token = res.token;
            // 获取设备列表
            t.getDeviceList(res.token)
              .then((res) => {
                if (res.result == 0) {
                  this.server_ip = res.server_ip;
                  let { data } = res;
                  data.forEach((item) => {
                    if (item.device_id == this.sn) {
                        console.log(item);
                      this.sn = item.device_id;
                      this.deviceName = item.nickname;
                      // console.log(this.sn);
                    } else {
                      // alert("设备不存在");
                      return;
                    }
                  });
  
                  // 43176050 39623600 14998052 35890596 39508455,39690881,25200226
                  // 获取播放地址并初始化api播放
                  t.requestPlayAddress(
                    this.token,
                    this.sn,
                    this.server_ip,
                    this.clarity
                  )
                    .then((res) => {
                        console.log(res,"res");
                      // if (res.code == 1003) return alert("签名错误");
                      // if (res.code == 1004)
                      //   return alert("token无法获取该设备信息");
                      // if (res.code == 1004)
                      //   return alert("设备密码错误,请联系管理员");
                      if (res.code == 1002) return this.$modal.notifyWarning('设备连接失败，请重试');
                      if (
                        res.code == 1003 ||
                        res.code == 1004 ||
                        res.code == 1012 ||
                        res.code == 1013
                      )
                        return this.$modal.notifyWarning('无法获取设备信息，请重试');
                      // if (res.code !== 1000) return alert("获取设备信息错误，请重试");
                      if (res.code === 1000) {
                        this.codec = res.codec;
                        this.play_token = res.play_token;
                        // console.log(res);
  
                        // 初始化云台支持类型，前端控制是否显示该类型的云台操作
                        this.isSupportLightCtr = res.light_ctrl; // 灯光控制
                        if (res.light_ctrl) {
                          this.lightStatus = res.light_status; // 若支持灯光控制，初始灯光状态,（1001开启，1002关闭，1003自动）
                        }
                        this.isSupportReverseCtr = res.reverse_ctrl; // 翻转
                        this.isSupportPtzCtr = res.ptz_ctrl; // 运动翻转
  
                        //设备是否在线
                        t.requestDevicesStatus([this.sn], this.server_ip).then(
                          (res) => {
                            if (res.code == 1000) {
                              this.deviceStatus = res.data[this.sn];
                            }
                          }
                        );
  
                        // // width,height 移动端h5根据res.width, res.height比例进行适配,codec为4时，传入的width,height就是canvas的宽高
                        // let pageWidth = this.$refs.page.clientWidth;
                        // let pageHeight = this.$refs.page.clientHeight;
                        let width = res.width;
                        let height = res.height;
                        // console.log("width", width);
                        // console.log("height", height);
                        this.player = t.init(
                          this.codec,
                          this.server_ip,
                          this.play_token,
                          width,
                          height
                        );
                        if (!this.player) {
                          this.$modal.notifyWarning('您的浏览器不支持WebAssembly，不支持播放');
                        } else {
                          console.log('api播放初始化完成');
                          this.isLoading = false;
                          this.isPlay = false;
                          this.isControls = true;
                        }
                      }
                    })
                    .catch((err) => {
                      console.log(err);
                    });
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
  
      // //退出
      // t.loginOut(this.token).then(res => {
      //   console.log(res);
      // }).catch(err => {
      //   console.log(err)
      // });
    },
  
    methods: {
      play() {
        // this.player.play();
        this.player.play("265Player", false);
        // 加载动画显示判断
        this.isLoading = true;
        clearInterval(this.timer);
        this.timer = "";
        this.timer = setInterval(() => {
          let isLoading = this.player.showLoading();
          if (!isLoading) {
            clearInterval(this.timer);
            this.timer = "";
            this.isLoading = false;
            // console.log("end");
          }
        }, 100);
      },
  
      cloudControl(command) {
        if (
          [
            "reverse",
            "light_on",
            "light_off",
            "light_auto",
            "spin_top",
            "spin_left",
            "spin_bottom",
            "spin_right",
          ].indexOf(command) !== -1
        ) {
          this.player.sendCommand(command);
          if (command == "light_on") {
            this.lightStatus = 1001;
          } else if (command == "light_off") {
            this.lightStatus = 1002;
          } else if (command == "light_auto") {
            this.lightStatus = 1003;
          }
          this.getVideoAddressCtrl();
        } else {
          this.$modal.notifyWarning('不支持的云台指令');
        }
        this.isLight = false; //隐藏开关自动等文字
      },
  
      stop() {
        this.player.stop();
      },
  
      // 获取播放地址--控制台
      getVideoAddressCtrl() {
        this.t
          .requestPlayAddress(this.token, this.sn, this.server_ip, this.clarity)
          .then((res) => {
            if (res.code == 1002) return this.$modal.notifyWarning('设备连接失败，请重试');
            if (
              res.code == 1003 ||
              res.code == 1004 ||
              res.code == 1012 ||
              res.code == 1013
            )
              return this.$modal.notifyWarning('无法获取设备信息，请重试');
            if (res.code === 1000) {
              this.codec = res.codec;
              this.play_token = res.play_token;
  
              // 初始化云台支持类型，前端控制是否显示该类型的云台操作
              this.isSupportLightCtr = res.light_ctrl; // 灯光控制
              // if (res.light_ctrl) {
              //   this.lightStatus = res.light_status; // 若支持灯光控制，初始灯光状态,（1001开启，1002关闭，1003自动）
              // }
              this.isSupportReverseCtr = res.reverse_ctrl; // 翻转
              this.isSupportPtzCtr = res.ptz_ctrl; // 运动翻转
  
              //设备是否在线
              this.t
                .requestDevicesStatus([this.sn], this.server_ip)
                .then((res) => {
                  if (res.code == 1000) {
                    this.deviceStatus = res.data[this.sn];
                  }
                });
  
              let width = res.width;
              let height = res.height;
              this.videoHeigth = (res.height * 100) / res.width; //视频高vw
              console.log(this.videoHeigth);
              // console.log("width", width);
              // console.log("height", height);
              this.player = this.t.init(
                this.codec,
                this.server_ip,
                this.play_token,
                width,
                height
              );
              if (!this.player) {
                this.$modal.notifyWarning('您的浏览器不支持WebAssembly，不支持播放');
              } else {
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      // 获取播放地址--清晰度切换
      getVideoAddress() {
        this.t
          .requestPlayAddress(this.token, this.sn, this.server_ip, this.clarity)
          .then((res) => {
            if (res.code == 1002) return this.$modal.notifyWarning('设备连接失败，请重试');
            if (
              res.code == 1003 ||
              res.code == 1004 ||
              res.code == 1012 ||
              res.code == 1013
            )
              return this.$modal.notifyWarning('无法获取设备信息，请重试');
            if (res.code === 1000) {
              this.codec = res.codec;
              this.play_token = res.play_token;
  
              // 初始化云台支持类型，前端控制是否显示该类型的云台操作
              this.isSupportLightCtr = res.light_ctrl; // 灯光控制
              // if (res.light_ctrl) {
              //   this.lightStatus = res.light_status; // 若支持灯光控制，初始灯光状态,（1001开启，1002关闭，1003自动）
              // }
              this.isSupportReverseCtr = res.reverse_ctrl; // 翻转
              this.isSupportPtzCtr = res.ptz_ctrl; // 运动翻转
  
              //设备是否在线
              this.t
                .requestDevicesStatus([this.sn], this.server_ip)
                .then((res) => {
                  if (res.code == 1000) {
                    this.deviceStatus = res.data[this.sn];
                  }
                });
  
              let width = res.width;
              let height = res.height;
              this.videoHeigth = (res.height * 100) / res.width; //视频高vw
              console.log(this.videoHeigth);
              // console.log("width", width);
              // console.log("height", height);
              this.player = this.t.init(
                this.codec,
                this.server_ip,
                this.play_token,
                width,
                height
              );
              // 先执行获取接口信息再play
              this.isPause = true;
              setTimeout(() => {
                this.isPause = false;
              }, 100);
              if (!this.player) {
                this.$modal.notifyWarning('您的浏览器不支持WebAssembly，不支持播放');
              } else {
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
  
      // 点击视频box  50vh
      clickVideo() {
        // this.isControls = !this.isControls;
        // this.isClarity = false;
        // this.isLight = false;
      },
      startPlay() {
        this.isPause = false;
        this.isPlay = true;
        this.isLight = false; //隐藏开关自动等文字
      },
      // 点击开始播放视频
      PlayVideo() {
        this.isPause = false;
        this.isPlay = true; //大图标
        this.isClarity = false; //标清/高清
        this.isLight = false; //隐藏开关自动等文字
      },
      // 点击暂停播放视频
      PuaseVideo() {
        if (!this.isPause) {
          this.isLoading = false;
        }
        this.isPause = true;
        this.isPlay = false; //大图标
        this.isClarity = false; //标清/高清
        this.isLight = false; //隐藏开关自动等文字
      },
      /* 开关灯开始 */
      clickLight() {
        this.isLight = !this.isLight;
      },
      /* 开关灯结束 */
      // 展开清晰度
      clickCearity() {
        if (this.clarity == 1) {
          this.clarity = 0; //请求标清
          this.isPlay = true; //隐藏大按钮
        } else if (this.clarity == 0) {
          this.clarity = 1; //请求高清
          this.isPlay = true; //隐藏大按钮
        }
        this.isClarity = !this.isClarity;
        this.isLight = false; //隐藏开关自动等文字
        this.getVideoAddress();
      },
    },
  
    watch: {
      isPause: {
        handler: function (val, oldval) {
          if (val) {
            this.stop();
          } else {
            this.play();
          }
        },
      },
      lightStatus(val) {
        this.lightStatus = val;
      },
    },
  };
  </script>
  
  <style lang='less' scoped>
  @-webkit-keyframes changeright {
    0% {
      -webkit-transform: rotate(0deg);
    }
  
    50% {
      -webkit-transform: rotate(180deg);
    }
  
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  
  .home {
    position: relative;
    width: 100vw;
    height: 100vh;
    // background-color: #000;
    background-color: #f5f5f5;
    .title {
      width: 100vw;
      height: 8vh;
      background-color: rgb(0, 0, 0);
      display: flex;
      // flex-direction: column;
      align-items: center;
      justify-content: space-around;
      .sn-name {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        .sn {
          color: #eee;
          font-size: 4vw;
        }
        .name {
          color: #ddd;
          font-size: 3vw;
        }
      }
      .status1 {
        flex: 1;
        color: #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          background-color: #67c23a;
          border-radius: 20px;
          margin-right: 4px;
        }
      }
      .status2 {
        flex: 1;
        color: #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        span {
          display: inline-block;
          width: 10px;
          height: 10px;
          background-color: #f56c6c;
          border-radius: 20px;
          margin-right: 4px;
        }
      }
      .space {
        flex: 1;
      }
    }
    .video-box {
      position: relative;
      width: 100vw !important;
      height: 75vw;
      background-color: rgb(0, 0, 0);
      display: flex;
      justify-content: center;
      // align-content: center;
      align-items: center;
      // .video {
      //   display: flex;
      //   justify-content: center;
      //   align-items: center;
      // }
      .loading {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 15vw;
        height: 15vw;
        -webkit-animation: changeright 2s linear infinite;
        .icon-jiazaizhong {
          font-size: 15vw;
        }
      }
    }
  
    /* 播放大按钮开始 */
    .video-box .big-play-button {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 15vw;
      height: 15vw;
      color: #fff;
      .icon-bofang {
        font-size: 15vw;
      }
    }
  
    /* 播放大按钮结束 */
  
    /* 控制按钮开始 */
    .controls-box {
      // position: absolute;
      // bottom: 0;
      margin: auto;
      width: 100vw;
      height: 10vw;
      background-color: #000000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        flex: 1;
        display: flex;
        justify-content: center;
        :active {
          opacity: 0.8;
        }
      }
      .icon-zanting,
      .icon-yinpinbofang,
      .icon-zhaoming,
      .icon-xuanzhuan {
        font-size: 7vw;
        color: #fff;
      }
  
      .dengguang1,
      .guanbidengguang1,
      .icon-zhaoming {
        font-size: 8vw;
        color: rgb(216, 135, 135);
      }
  
      /* 清晰度 & 开关灯 */
      .clarity {
        position: relative;
        color: #fff;
        .select {
          position: absolute;
          left: 0;
          bottom: 9vw;
          right: 0;
          margin: auto;
          background-color: rgba(0, 0, 0, 0.5);
          width: 20vw;
          border-radius: 0.5vw;
          display: flex;
          flex-direction: column;
        }
        .select div {
          font-size: 3.8vw;
          padding-bottom: 1vw;
          padding-top: 1vw;
        }
        .select div:nth-last-child(1) {
          padding-bottom: 1vw;
        }
        .select-result span {
          font-size: 4vw;
          border: 0.5vw solid #fff;
          padding: 1vw 5vw;
          border-radius: 2vw;
        }
        .light span {
          // font-size: 6vw;
          padding: 1vw 5vw;
          border-radius: 2vw;
          color: #fff;
        }
      }
    }
  
    /* 控制按钮结束 */
  
    /* 上下左右方向开始 */
    .direction {
      // position: absolute;
      // bottom: 10vh;
      position: relative;
      margin-top: 10vw;
      width: 100vw;
      height: 30vh;
      background-color: #f5f5f5;
      .circle,
      .middle {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 45vw;
        height: 45vw;
        background-color: #fff;
        border-radius: 50%;
        display: flex;
        flex-wrap: wrap;
        transform: rotate(45deg);
        .middle {
          width: 10vw;
          height: 10vw;
          background-color: #f5f5f5;
        }
  
        .left,
        .right,
        .top,
        .bottom {
          width: 22.5vw;
          height: 22.5vw;
          text-align: center;
          line-height: 22.5vw;
          transform: rotate(-45deg);
          border-radius: 50%;
          .icon-shang,
          .icon-you,
          .icon-zuo,
          .icon-xia {
            font-size: 6vw;
          }
          :active {
            opacity: 0.5;
            padding: 3vw;
            border-radius: 50%;
            background-image: radial-gradient(
              circle,
              rgba(0, 183, 255, 0.2),
              rgba(0, 183, 255, 0.1)
            );
          }
        }
      }
    }
    /* 上下左右方向结束 */
  }
  
  // 波纹
  // .icon-shang:after,
  // .icon-xia:after,
  // .icon-zuo:after,
  // .icon-you:after {
  //   content: "";
  //   display: block;
  //   position: absolute;
  //   width: 10vw;
  //   height: 10vw;
  //   top: 0;
  //   left: 0;
  //   bottom: 0;
  //   right: 0;
  //   margin: auto;
  //   pointer-events: none;
  //   background-image: radial-gradient(
  //     circle,
  //     #00b7ff 10%,
  //     transparent 10.01%
  //   );
  //   background-repeat: no-repeat;
  //   background-position: 50%;
  //   transform: scale(8, 8);
  //   opacity: 0;
  //   transition: transform 0.3s, opacity 0.5s;
  // }
  
  // .icon-shang:active:after,
  // .icon-xia:active:after,
  // .icon-zuo:active:after,
  // .icon-you:active:after {
  //   transform: scale(0, 0);
  //   opacity: 0.3;
  //   //设置初始状态
  //   transition: 0s;
  // }
  // .left:active,
  // .right:active,
  // .top:active,
  // .bottom:active {
  //   opacity: 0.5;
  //   width: 10vw;
  //   height: 10vw;
  //   background-color: pink;
  // }
  </style>